<template>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input
          class="input"
          placeholder="根据用户名搜索"
          v-model="formInline.username"
          clearable
        >
        </el-input>
        <el-button class="stm" @click="clear">清空</el-button>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button
          style="float: right"
          type="success"
          icon="el-icon-edit"
          @click="add"
          >新增用户</el-button
        >
      </div>
      <el-alert
        title='20'
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-table :data="tableData" >
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="permission_group_title" label="权限名称">
        </el-table-column>
        <el-table-column prop="role" label="角色"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
              <el-button
                circle
                plain
                type="primary"
                icon="el-icon-edit"
                @click="edit(scope.row.id)"
              ></el-button>
              <el-button
                circle
                plain
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.row.id)"
              ></el-button>
            </template>
        </el-table-column>
      </el-table>
  <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="100"
          layout="prev, pager, next,sizes, jumper"
          :total="20"
        >
        </el-pagination>
      </div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <div v-if="isAdd">
           <el-form
          ref="formRef"
          :model="userForm"
          label-width="120px"
          :rules='rules'
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="userForm.role"></el-input>
          </el-form-item>
          <el-form-item label="权限组名称">
            <el-select
              v-model="userForm.permission_group_id"
              placeholder="请选择"
              filterable
              clearable
            >
              <el-option
                v-for="item in permissionOption"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model.number="userForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input
              type="textarea"
              v-model="userForm.introduction"
            >
            </el-input>
          </el-form-item>
        </el-form>
        </div>
          <div v-if="isEdit">
        <el-form
          ref="formRef"
          :model="userForm"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="userForm.role"></el-input>
          </el-form-item>
          <el-form-item label="权限组名称">
            <!-- <el-input v-model="userForm.permission_group_id"></el-input> -->
            <el-select
              v-model="userForm.permission_group_id"
              placeholder="请选择"
              filterable
              clearable
            >
              <el-option
                v-for="item in permissionOption"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model.number="userForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input
              type="textarea"
              v-model="userForm.introduction"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
         <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save" >确 定</el-button>
      </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list ,add,detail, update, remove } from '@/api/base/users'
import { simple } from '@/api/base/permissions'
export default {
  data () {
    return {
      formInline: {
        username: ''
      },
       params: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      userForm: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      },
      permissionOption: [],
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      currentPage4: 1,
      tableData: [],
      counts: null,
     
      dialogVisible: false,
      isAdd: false
    }
  },

  created () {
    this.list()
    this.simple()
  },

  methods: {
    async list () {
      const { data } = await list(this.params)
      console.log(data)
      this.tableData = data.list
      this.res = data.res
    },
    handleCurrentChange (current) {
      this.params.page = current
      this.list()
    },
    onSubmit () {
      this.params.username = this.formInline.username
      this.list()
    },
    clear () {
      this.formInline.username = ''
      this.params.username = ''
      this.list()
    },
    async list () {
      const { data } = await list(this.params)
      this.tableData = data.list
      this.counts = data.counts
    },
    async simple () {
      const { data } = await simple()

      this.permissionOption = data
    },
    add () {
     this.title = '创建用户'
      this.dialogVisible = true
      this.isAdd = true
        this.isEdit = false
    },
     
    handleClose () {
      this.dialogVisible = false
    },
     async edit (id) {
      this.title = '编辑用户'
      this.dialogVisible = true
      this.isAdd = false
      this.isEdit = true

      const { data } = await detail(id)
      this.userForm.username = data.username
      this.userForm.email = data.email
      this.userForm.password = data.password
      this.userForm.role = data.role
      this.userForm.id = data.id
      this.userForm.permission_group_id = data.permission_group_id
      this.userForm.phone = data.phone
      this.userForm.introduction = data.introduction
    },
      async save () {
      try {
        if (this.title === '创建用户') {
          await this.$refs.formRef.validate()
          const res = await add(this.userForm)

          if (res.status === 200) {
            this.$message.success('添加成功')
          } else {
            this.$message.error('添加失败')
          }
        } else {
          const res = await update(this.userForm)
          if (res.status === 200) {
            this.$message.success('修改成功')
          } else {
            this.$message.error('修改失败')
          }
        }
        this.dialogVisible = false
        this.list()
      } catch (err) {
        this.$message.error(err.response.data)
      }
    },
  
  }
}

</script>

<style scoped lang="less">
.box {
  .box-card {
    margin-top: 30px;
    margin-left: 40px;
    width: 1400px;
    height: 800px;
    background-color: #fff;
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: '';
    }
    .clearfix:after {
      clear: both;
    }

    .box-card {
      width: 480px;
    }
    .input {
      width: 200px;
    }
    .stm {
      margin-left: 10px;
    }
    .primary {
      background-color: green;
    }
  }
}
</style>
